<template>
  <view>
    <custom-navbar title="我的" :leftIcon="false"></custom-navbar>
    <view class="user-section">
      <image class="bg" src="/static/images/user_bg.jpg"></image>
      <view class="user-info-box">
        <view class="portrait-box">
          <image class="portrait" src="/static/images/missing_face.png"></image>
        </view>
        <view class="info-box">
          <text class="username">"游客"</text>
        </view>
      </view>
    </view>

    <!-- 微信登录 -->
    <button
      class="WX-login-btn"
      open-type="getUserInfo"
      @getuserinfo="getuserinfo"
    >
      微信登录
    </button>
  </view>
  <custom-tabbar :index="2" />
</template>
<script setup lang="ts">
import { ref } from "vue";
import { wxLoginApi } from "@/api/login.js";
const userInfo = ref({});
const getuserinfo = (e) => {
  console.log(e);
  uni.login({
    success: (res) => {
      console.log(res);
      wxLoginApi({
        appCode: "1",
        code: res.code,
      }).then((res) => {
        console.log(res);
      });
    },
  });
};
</script>
<style lang="scss" scoped>
.user-section {
  height: 520upx;
  padding: 100upx 30upx 0;
  position: relative;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: blur(1px);
    opacity: 0.7;
  }
}
.user-info-box {
  height: 180upx;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  .portrait {
    width: 130upx;
    height: 130upx;
    border: 5upx solid #fff;
    border-radius: 50%;
  }
  .username {
    margin-left: 20upx;
  }
}
</style>
